<template>
	<view class="image-text-area">
		<textarea :value="defaultVal" @input="handleInput" class="textarea" :placeholder="placeholder"
			:placeholder-style="placeholderStyle" :auto-height="autoHeight" :maxlength="maxlength"
			:show-confirm-bar="false" :style="{'height':textareaHeight+'rpx','min-height':textareaMinHeight+'rpx'}" />
		<view class="footer">
			<view class="image-list">
				<u-upload :action="action" :file-list="fileList" custom-btn max-count="3" ref="upload">
					<view slot="addBtn" class="add-btn">
						<i class="iconfont icon-add-consult" style="font-size: 40rpx" />
					</view>
				</u-upload>
			</view>
			<view class="max-length">
				<text class="count">{{defaultVal.length}}</text>/{{maxlength}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				defaultVal: '',
				fileList: []
			}
		},
		props: {
			placeholder: {
				type: String,
				default: '您的反馈将是我们进步的动力，成功路上感谢有您。'
			},
			action: {
				type: String,
				default:'https://www.gdlzjt.com/api/upload/uploadImagesCos'
			},
			placeholderStyle: {
				type: String,
				default: 'fontSize:24rpx;color:#999999;fontFamily:$global-font-family'
			},
			autoHeight: {
				type: Boolean,
				default: false,
			},
			maxlength: {
				type: Number,
				default: 200,
			},
			textareaHeight: {
				type: Number,
				default: 168
			},
			textareaMinHeight: {
				type: Number,
				default: 168
			}
		},
		watch: {
			value: {
				handler(val, oval) {
					this.defaultVal = val;
				},
				immediate: false,
			}
		},
		methods: {
			handleInput(event) {
				let value = event.detail.value;
				this.$emit('input', value);
				this.defaultVal = value;
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./imageTextArea.scss";
</style>
